<template>
  <!-- 用户管理页面 -->
  <div class>
    <div class="topbox">
      <a-input
        v-model="searchIsusername"
        placeholder="请输入用户名"
        style="width:250px"
        class="rightstyle"
      />
      <a-input v-model="searchIsphone" placeholder="请输入手机号" style="width:250px" class="rightstyle" />
      <a-select
        class="rightstyle"
        size="default"
        placeholder="请选择审核状态"
        style="width:250px"
        v-model="searchIsstate"
      >
        <a-select-option v-for="item in selectdata" :key="item.key">{{ item.value }}</a-select-option>
      </a-select>
      <a-button type="primary" icon="search" @click="searchHandle" class="rightstyle">搜索</a-button>
      <a-button class="rightstyle" @click="clearHandle">重置清空</a-button>
      <a-button
        type="primary"
        @click="exportExcelData"
        icon="cloud-download"
        class="rightstyle"
      >导出用户信息</a-button>
      <a-button type="primary" icon="plus-circle" @click="showModal">新增用户</a-button>
    </div>
    <a-modal
      :title="counyType == 1 ? '新增' : '修改'"
      :visible="visible"
      okText="确认"
      cancelText="取消"
      :width="560"
      :confirmLoading="loading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        :model="writeForm"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        ref="writeForm"
        hideRequiredMark
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item prop label="用户名">
              <a-input v-model="writeForm.userName" placeholder="请输入用户名" />
            </a-form-model-item>
          </a-col>
          <a-col :span="11" :offset="1">
            <a-form-model-item prop label="状态">
              <a-select v-model="writeForm.state" placeholder="请选择状态">
                <a-select-option value="0">0</a-select-option>
                <a-select-option value="1">1</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item prop label="人物名称">
              <a-input v-model="writeForm.personName" placeholder="请输入人物名称" />
            </a-form-model-item>
          </a-col>
          <a-col :span="11" :offset="1">
            <a-form-model-item prop label="密码">
              <a-input v-model="writeForm.passWord" placeholder="请输入密码" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item prop label="昵称" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="writeForm.nickName" placeholder="请输入昵称" />
        </a-form-model-item>
        <a-form-model-item prop label="手机号" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="writeForm.mobilePhone" placeholder="请输入手机号" />
        </a-form-model-item>
        <a-form-model-item prop label="身份证号码" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="writeForm.idcard" placeholder="请输入身份证号码" />
        </a-form-model-item>
        <a-form-model-item prop label="邮箱" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="writeForm.email" placeholder="请输入邮箱" />
        </a-form-model-item>
        <a-form-model-item prop label="角色" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-select
            mode="multiple"
            size="large"
            placeholder="请选择"
            v-model="writeForm.syUserRoleList"
          >
            <a-select-option v-for="item in roledata" :key="item.id">{{item.roleName}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item prop label="图片地址" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="writeForm.userImage" placeholder="请输入图片地址" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-table :columns="columns" :data-source="data" rowKey="id">
      <span slot="customTitle">Name</span>
      <span slot="action" slot-scope="text, record">
        <a-button type="danger" @click="delhandle(record)">删除</a-button>
        <a-divider type="vertical" />
        <a-button type="primary" @click="writehandle(record)">修改</a-button>
        <!-- <a-divider type="vertical" />
        <a-button type="dashed">预览</a-button>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            更多操作
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item v-for="(item,index) in caozuo" :key="index">
              <a href="javascript:;">{{item.value}}</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>-->
      </span>
    </a-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      counyType: 1,
      writeForm: {},
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      loading: false,
      visible: false,
      caozuo: [
        { init: 1, value: "批准" },
        { init: 2, value: "驳回" },
        { init: 3, value: "解冻" },
        { init: 4, value: "冻结" },
        { init: 5, value: "重置密码" }
      ],
      selectdata: [
        { value: "状态0", key: 0 },
        { value: "状态1", key: 1 },
        { value: "状态2", key: 2 },
        { value: "状态3", key: 3 }
      ],
      data: [],
      roledata: [], //角色数据
      columns: [
        {
          title: "用户名",
          dataIndex: "userName",
          key: "userName"
        },
        {
          title: "密码",
          dataIndex: "passWord",
          key: "passWord"
        },
        {
          title: "昵称",
          dataIndex: "nickName",
          key: "nickName"
        },
        {
          title: "邮箱",
          key: "email",
          dataIndex: "email"
        },
        {
          title: "电话号码",
          key: "mobilePhone",
          dataIndex: "mobilePhone"
        },
        {
          title: "身份证号",
          dataIndex: "idcard",
          key: "idcard"
        },
        {
          dataIndex: "state",
          key: "state",
          title: "状态",
          customRender: function(text) {
            if (text == "0") {
              return "状态0";
            } else {
              return "状态1";
            }
          }
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" }
        }
      ],
      searchIsusername: "",
      searchIsphone: "",
      searchIsstate: undefined
    };
  },
  mounted() {
    this.queryrole();
    this.userquery();
  },
  computed: {},
  methods: {
    userquery() {
      this.$axios.post("/user/service/findByPage", {}).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.data = res.data.queryResult;
        }
      });
    },
    queryrole() {
      this.$axios.post("/role/service/findByPage", {}).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.roledata = res.data;
        }
      });
    },
    searchHandle() {
      //搜索
      let data = {};
      if (this.searchIsusername != "") {
        data["userName"] = this.searchIsusername;
      }
      if (this.searchIsphone != "") {
        data["mobilePhone"] = this.searchIsphone;
      }
      if (this.searchIsstate != undefined) {
        data["state"] = this.searchIsstate;
      }
      this.$axios.post("/user/service/findByPage", data).then(res => {
        if (res.code == 200) {
          this.data = res.data.queryResult;
        }
      });
    },
    clearHandle(){
      this.searchIsusername = "",
      this.searchIsphone = "",
      this.searchIsstate = undefined
      this.userquery();
    },
    showModal() {
      //新增
      this.visible = true;
      this.counyType = 1;
      this.writeForm = {};
    },
    delhandle(record) {
      //删除
      console.log(record);
      var that = this;
      this.$confirm({
        title: "删除提示",
        content: "你确定要删除整个主表吗? 删除后数据将无法恢复",
        onOk: async () => {
          that.$axios
            .post("/user/service/deleteByIds", { id: record.id })
            .then(res => {
              if (res.code == 200) {
                that.$message.success(res.msg);
                that.userquery();
              }
            });
        },
        onCancel() {}
      });
    },
    writehandle(record) {
      console.log(record);
      //修改
      this.visible = true;
      this.counyType = 2;
      this.writeForm = {
        email: record.email,
        idcard: record.idcard,
        mobilePhone: record.mobilePhone,
        nickName: record.nickName,
        passWord: record.passWord,
        personName: record.personName,
        state: record.state.toString(),
        userImage: record.userImage,
        userName: record.userName,
        syUserRoleList: record.syUserRoleList.map(function(item) {
        return item.roleId
      }),
        id: record.id
      };
    },
    handleOk() {
      //确定
      let that = this;
      this.loading = true;
      console.log(this.writeForm);
      let syUserRoleList = this.writeForm.syUserRoleList.map(function(item) {
        return { roleId: item };
      });
      if (this.counyType == 1) {
        let isdata = {
          email: this.writeForm.email,
          idcard: this.writeForm.idcard,
          mobilePhone: this.writeForm.mobilePhone,
          nickName: this.writeForm.nickName,
          passWord: this.writeForm.passWord,
          personName: this.writeForm.personName,
          state: this.writeForm.state,
          syUserRoleList,
          userImage: this.writeForm.userImage,
          userName: this.writeForm.userName
        };
        this.$axios.post("/user/service/create", isdata).then(res => {
          if (res.code == 200) {
            that.visible = false;
            that.loading = false;
            this.userquery();
          }
        });
      } else if (this.counyType == 2) {
        //修改
        let isdata = {
          email: this.writeForm.email,
          idcard: this.writeForm.idcard,
          mobilePhone: this.writeForm.mobilePhone,
          nickName: this.writeForm.nickName,
          passWord: this.writeForm.passWord,
          personName: this.writeForm.personName,
          state: this.writeForm.state,
          syUserRoleList,
          userImage: this.writeForm.userImage,
          userName: this.writeForm.userName,
          id: this.writeForm.id
        };
        this.$axios.post("/user/service/edit", isdata).then(res => {
          if (res.code == 200) {
            that.visible = false;
            that.loading = false;
            this.userquery();
          }
        });
      }
    },
    handleCancel() {
      this.visible = false;
    },
    handleChangeSHtype(val) {
      console.log(val);
    },
    exportExcelData() {
      //导出Excel按钮
      let columnTitle = this.columns; //横着标题
      let columnData = this.data; //数据
      this.exportExcel(columnTitle, columnData, "用户管理excel"); //调用封装好的方法
    },
    // 导出Excel
    exportExcel(columns, list, excelName) {
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require("../../vendor/vender/Export2Excel");
        let tHeader = [];
        let filterVal = [];
        columns.forEach(item => {
          tHeader.push(item.title);
          filterVal.push(item.key);
        });
        let data = this.formatJson(list, filterVal);
        export_json_to_excel(tHeader, data, excelName);
      });
    },
    formatJson(list, filterVal) {
      return list.map(v => filterVal.map(j => v[j]));
    }
  }
};
</script>
<style lang="scss" scoped>
.rightstyle {
  margin-right: 12px;
}
.topbox {
  margin-bottom: 15px;
}
</style>